import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

// bs
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'

// 全局过滤器(可以挂载多个)
// 参数：
// 一：过滤器的名字
// 二：回调函数(data: 管道符(|)前面的数据, format: 传递过来的数据)
Vue.filter('setMsg',function (data, format) {
  console.log(data);
  console.log(format);
  return data.replace('真好','**').replace('厉害','**')
})
Vue.filter('setMsg_1',function (data, format) {
  console.log(data);
  console.log(format);
  return data.replace('真好','6').replace('厉害','6')
})
Vue.filter('setMsg_2',function (data, format) {
  console.log(data);
  console.log(format);
  return data.replace('游戏','**')
})

// 自定义指令
// 参数：
// 第一个：指令的名字
// 第二个：对象，里面包含三个钩子方法
Vue.directive('color', {
  // 三个钩子方法都有三个参数：
    // el：绑定元素，可以操作DOM
    // binding：绑定的值
    // oldValue：绑定上一个值
  // bind只调用一次，第一次初始的时候
  bind(el, bindIng) {
    console.log(el)
    el.style.color = bindIng.value
    console.log(bindIng.value)
  },
  // inserted渲染以加载的元素
  inserted(el) {
    el.focus(); // input框自动获取焦点
  },
  // update 当元素更新时
  update(el) {
    console.log(el + '更新')
  }
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
